<template>
    <ContentBox title="物流建设">
        <div class="wuliu">
            <div class="header">
                累计寄出商品件数<span class="digiter-number" style="color:#18E7E7;">151</span>亿件
            </div>
            <div class="content">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="bottom">
                <div>
                    <div>平均揽收用时</div>
                    <div>
                        <span class="digiter-number">9</span>小时
                    </div>
                </div>
                <div></div>
                <div>
                    <div>送货平均时常</div>
                    <div>
                        <span class="digiter-number">9</span>小时
                    </div>
                </div>
            </div>
        </div>
    </ContentBox>
</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"


    export default {
        name: "Preview",
        components: {
            ContentBox,

        }
    }
</script>

<style lang="scss" scoped>
    .wuliu {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .content {
        flex: 1;
        display: flex;
        > div {

            /*flex: 1;*/
            &:nth-of-type(even) {
                width: 40%;
                background: url("../../assets/image/dajiantou.png") center no-repeat;
                background-size: 90% 50%;
            }
            &:nth-of-type(odd) {
                /*background: red;*/
                width: 30%;
            }
            &:first-child {
                background: url("../../assets/image/tuoche.png") center no-repeat;
            }
            &:last-child {
                background: url("../../assets/image/kache.png") center no-repeat;
            }
        }
    }

    .bottom {
        height: 100px;
        display: flex;
        > div {

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;

            > div {
                font-size: 20px;
                text-align: center;
                span {
                    color: #1AE5E7;
                }

            }
            &:nth-of-type(even) {
                width: 40%;
            }
            &:nth-of-type(odd) {
                /*background: red;*/
                width: 30%;
            }
        }

    }

    .header {
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
    }
</style>
